<template>
  <div class="low-code-platform">
    <div class="component-panel">
      <h3>组件列表</h3>
      <div class="component-list">
        <div
          v-for="(component, index) in componentList"
          :key="index"
          class="component-item"
          draggable="true"
          @dragstart="dragStart($event, component)"
        >
          <i :class="component.icon"></i>
          <span>{{ component.label }}</span>
        </div>
      </div>
    </div>

    <div class="design-panel">
      <div
        class="design-area"
        @dragover.prevent
        @drop="dropComponent($event)"
        @click.stop="deselectComponent"
      >
        <template v-if="pageComponents.length === 0">
          <div class="empty-tip">拖拽组件到此区域</div>
        </template>
        <template v-else>
          <div
            v-for="(item, index) in pageComponents"
            :key="index"
            class="component-wrapper"
            :class="{ selected: index === selectedIndex, [item.name]: true }"
            :style="getComponentStyle(item)"
            @click.stop="selectComponent(index)"
          >
            <div class="component-content" :style="{ width: '100%', height: '100%' }">
              <component
                :is="item.component"
                v-bind="item.props"
                :style="{ width: '100%', height: '100%' }"
              ></component>
            </div>

            <!-- 拖拽手柄 -->
            <div
              v-if="index === selectedIndex"
              class="drag-handle"
              @mousedown="startDrag($event, index)"
            >
              <i class="el-icon-rank"></i>
            </div>

            <!-- 调整大小的手柄 -->
            <div
              v-if="index === selectedIndex"
              class="resize-handle resize-handle-se"
              @mousedown="startResize($event, index, 'se')"
            ></div>
            <div
              v-if="index === selectedIndex"
              class="resize-handle resize-handle-sw"
              @mousedown="startResize($event, index, 'sw')"
            ></div>
            <div
              v-if="index === selectedIndex"
              class="resize-handle resize-handle-ne"
              @mousedown="startResize($event, index, 'ne')"
            ></div>
            <div
              v-if="index === selectedIndex"
              class="resize-handle resize-handle-nw"
              @mousedown="startResize($event, index, 'nw')"
            ></div>
          </div>
        </template>
      </div>
    </div>

    <div class="property-panel" v-if="selectedIndex !== -1">
      <h3>属性设置</h3>
      <div class="component-actions">
        <el-button type="danger" size="mini" @click="removeComponent(selectedIndex)">
          <i class="el-icon-delete"></i> 删除组件
        </el-button>
      </div>
      <el-tabs value="props">
        <el-tab-pane label="组件属性" name="props">
          <div class="property-form">
            <template v-for="(value, key) in currentComponentProps">
              <div class="property-item" :key="key">
                <label>{{ key }}</label>
                <!-- 根据属性类型显示不同的编辑控件 -->
                <template v-if="isColorProperty(key)">
                  <el-color-picker
                    v-model="pageComponents[selectedIndex].props[key]"
                    show-alpha
                    class="full-width-control"
                  ></el-color-picker>
                </template>
                <template v-else-if="isBooleanProperty(value)">
                  <el-switch
                    v-model="pageComponents[selectedIndex].props[key]"
                    class="full-width-control"
                  ></el-switch>
                </template>
                <template v-else-if="isNumberProperty(value)">
                  <el-input-number
                    v-model="pageComponents[selectedIndex].props[key]"
                    :min="0"
                    size="small"
                    class="full-width-control"
                  ></el-input-number>
                </template>
                <template v-else-if="isSelectProperty(key) || shouldUseSelect(key)">
                  <el-select
                    v-model="pageComponents[selectedIndex].props[key]"
                    size="small"
                    class="full-width-control"
                  >
                    <el-option
                      v-for="option in getSelectOptions(key)"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    ></el-option>
                  </el-select>
                </template>
                <template v-else>
                  <el-input
                    v-model="pageComponents[selectedIndex].props[key]"
                    size="small"
                    class="full-width-control"
                  ></el-input>
                </template>
              </div>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="styles">
          <div class="property-form">
            <!-- 位置设置 -->
            <div class="property-group">
              <div class="property-group-title">位置</div>
              <div class="property-row">
                <div class="property-item">
                  <label>X坐标</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.left"
                    :min="0"
                    size="small"
                    @change="updateComponentStyle"
                  ></el-input-number>
                </div>
                <div class="property-item">
                  <label>Y坐标</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.top"
                    :min="0"
                    size="small"
                    @change="updateComponentStyle"
                  ></el-input-number>
                </div>
              </div>
            </div>

            <!-- 尺寸设置 -->
            <div class="property-group">
              <div class="property-group-title">尺寸</div>
              <div class="property-row">
                <div class="property-item">
                  <label>宽度</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.width"
                    :min="10"
                    size="small"
                    @change="updateComponentStyle"
                  ></el-input-number>
                </div>
                <div class="property-item">
                  <label>高度</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.height"
                    :min="10"
                    size="small"
                    @change="updateComponentStyle"
                  ></el-input-number>
                </div>
              </div>
            </div>

            <!-- 外观设置 -->
            <div class="property-group">
              <div class="property-group-title">外观</div>
              <div class="property-item">
                <label>背景颜色</label>
                <el-color-picker
                  v-model="pageComponents[selectedIndex].style.backgroundColor"
                  show-alpha
                  @change="updateComponentStyle"
                ></el-color-picker>
              </div>
              <div class="property-item">
                <label>边框</label>
                <div class="property-row">
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.borderWidth"
                    :min="0"
                    :max="10"
                    size="small"
                    @change="updateComponentStyle"
                  ></el-input-number>
                  <el-select
                    v-model="pageComponents[selectedIndex].style.borderStyle"
                    size="small"
                    @change="updateComponentStyle"
                  >
                    <el-option label="无" value="none"></el-option>
                    <el-option label="实线" value="solid"></el-option>
                    <el-option label="虚线" value="dashed"></el-option>
                    <el-option label="点线" value="dotted"></el-option>
                  </el-select>
                  <el-color-picker
                    v-model="pageComponents[selectedIndex].style.borderColor"
                    show-alpha
                    @change="updateComponentStyle"
                  ></el-color-picker>
                </div>
              </div>
              <div class="property-item">
                <label>圆角</label>
                <el-input-number
                  v-model="pageComponents[selectedIndex].style.borderRadius"
                  :min="0"
                  :max="50"
                  size="small"
                  @change="updateComponentStyle"
                ></el-input-number>
              </div>
              <div class="property-item">
                <label>阴影</label>
                <el-switch
                  v-model="pageComponents[selectedIndex].style.enableShadow"
                  @change="updateShadow"
                ></el-switch>
                <div v-if="pageComponents[selectedIndex].style.enableShadow" class="shadow-settings">
                  <div class="property-row">
                    <el-input-number
                      v-model="pageComponents[selectedIndex].style.shadowX"
                      :min="-20"
                      :max="20"
                      size="small"
                      @change="updateShadow"
                    ></el-input-number>
                    <el-input-number
                      v-model="pageComponents[selectedIndex].style.shadowY"
                      :min="-20"
                      :max="20"
                      size="small"
                      @change="updateShadow"
                    ></el-input-number>
                  </div>
                  <div class="property-row">
                    <el-input-number
                      v-model="pageComponents[selectedIndex].style.shadowBlur"
                      :min="0"
                      :max="20"
                      size="small"
                      @change="updateShadow"
                    ></el-input-number>
                    <el-color-picker
                      v-model="pageComponents[selectedIndex].style.shadowColor"
                      show-alpha
                      @change="updateShadow"
                    ></el-color-picker>
                  </div>
                </div>
              </div>
            </div>

            <!-- 对齐设置 -->
            <div class="property-group">
              <div class="property-group-title">对齐</div>
              <div class="property-item">
                <label>水平对齐</label>
                <el-select
                  v-model="pageComponents[selectedIndex].style.textAlign"
                  size="small"
                  class="full-width-control"
                  @change="updateComponentStyle"
                >
                  <el-option label="左对齐" value="left"></el-option>
                  <el-option label="居中" value="center"></el-option>
                  <el-option label="右对齐" value="right"></el-option>
                </el-select>
              </div>
              <div class="property-item">
                <label>垂直对齐</label>
                <el-select
                  v-model="pageComponents[selectedIndex].style.verticalAlign"
                  size="small"
                  class="full-width-control"
                  @change="updateComponentStyle"
                >
                  <el-option label="顶部对齐" value="top"></el-option>
                  <el-option label="居中对齐" value="middle"></el-option>
                  <el-option label="底部对齐" value="bottom"></el-option>
                </el-select>
              </div>
            </div>

            <!-- 动画设置 -->
            <div class="property-group">
              <div class="property-group-title">动画效果</div>
              <div class="property-item">
                <label>动画类型</label>
                <el-select
                  v-model="pageComponents[selectedIndex].style.animation.type"
                  size="small"
                  @change="updateAnimation"
                >
                  <el-option label="无" value="none"></el-option>
                  <el-option label="淡入" value="fade"></el-option>
                  <el-option label="滑入" value="slide"></el-option>
                  <el-option label="弹入" value="bounce"></el-option>
                  <el-option label="旋转" value="rotate"></el-option>
                  <el-option label="缩放" value="scale"></el-option>
                  <el-option label="闪烁" value="flash"></el-option>
                  <el-option label="抖动" value="shake"></el-option>
                </el-select>
              </div>
              <div v-if="pageComponents[selectedIndex].style.animation.type !== 'none'">
                <div class="property-item">
                  <label>动画方向</label>
                  <el-select
                    v-model="pageComponents[selectedIndex].style.animation.direction"
                    size="small"
                    @change="updateAnimation"
                  >
                    <el-option label="从左" value="left"></el-option>
                    <el-option label="从右" value="right"></el-option>
                    <el-option label="从上" value="top"></el-option>
                    <el-option label="从下" value="bottom"></el-option>
                  </el-select>
                </div>
                <div class="property-item">
                  <label>动画持续时间 (秒)</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.animation.duration"
                    :min="0.1"
                    :max="10"
                    :step="0.1"
                    size="small"
                    @change="updateAnimation"
                  ></el-input-number>
                </div>
                <div class="property-item">
                  <label>动画延迟 (秒)</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.animation.delay"
                    :min="0"
                    :max="10"
                    :step="0.1"
                    size="small"
                    @change="updateAnimation"
                  ></el-input-number>
                </div>
                <div class="property-item">
                  <label>重复次数</label>
                  <el-input-number
                    v-model="pageComponents[selectedIndex].style.animation.iterationCount"
                    :min="1"
                    :max="10"
                    size="small"
                    @change="updateAnimation"
                  ></el-input-number>
                  <el-checkbox
                    v-model="pageComponents[selectedIndex].style.animation.infinite"
                    @change="updateAnimation"
                  >无限循环</el-checkbox>
                </div>
                <div class="property-item">
                  <label>鼠标悬停时触发</label>
                  <el-switch
                    v-model="pageComponents[selectedIndex].style.animation.hoverTrigger"
                    @change="updateAnimation"
                  ></el-switch>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="action-bar">
      <el-button type="primary" @click="exportJSON">导出JSON</el-button>
      <el-button type="success" @click="previewPage">预览</el-button>
      <el-button @click="clearDesign">清空</el-button>
    </div>

    <!-- JSON导出对话框 -->
    <el-dialog
      title="页面JSON数据"
      :visible.sync="jsonDialogVisible"
      width="50%"
    >
      <pre>{{ pageJSON }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jsonDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="copyJSON">复制</el-button>
      </span>
    </el-dialog>

    <!-- 预览对话框 -->
    <el-dialog
      title="页面预览"
      :visible.sync="previewDialogVisible"
      width="80%"
      :fullscreen="isFullscreen"
    >
      <div class="preview-container">
        <div
          v-for="(item, index) in pageComponents"
          :key="index"
          class="preview-component"
        >
          <div :style="getComponentStyle(item)" style="position: relative;">
            <component
              :is="item.component"
              v-bind="item.props"
              :style="{ width: '100%', height: '100%' }"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleFullscreen">
          {{ isFullscreen ? '退出全屏' : '全屏预览' }}
        </el-button>
        <el-button @click="previewDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
// 导入组件包
import ComponentPackage from '@/custom-component';

export default {
  name: 'LowCodePlatform',
  data() {
    return {
      // 组件列表
      componentList: [],
      // 页面组件
      pageComponents: [],
      // 当前选中的组件索引
      selectedIndex: -1,
      // JSON对话框显示状态
      jsonDialogVisible: false,
      // 预览对话框显示状态
      previewDialogVisible: false,
      // 是否全屏预览
      isFullscreen: false,
      // 导出的JSON数据
      pageJSON: '',
      // 拖拽相关状态
      isDragging: false,
      isResizing: false,
      resizeDirection: '',
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0,
      startLeft: 0,
      startTop: 0,
      // 选择属性的选项
      selectOptions: {
        type: [
          { label: '主要按钮', value: 'primary' },
          { label: '成功按钮', value: 'success' },
          { label: '警告按钮', value: 'warning' },
          { label: '危险按钮', value: 'danger' },
          { label: '信息按钮', value: 'info' },
          { label: '文本按钮', value: 'text' }
        ],
        size: [
          { label: '默认', value: '' },
          { label: '中等', value: 'medium' },
          { label: '小型', value: 'small' },
          { label: '迷你', value: 'mini' }
        ],
        fit: [
          { label: '填充', value: 'fill' },
          { label: '包含', value: 'contain' },
          { label: '覆盖', value: 'cover' },
          { label: '不缩放', value: 'none' },
          { label: '缩放', value: 'scale-down' }
        ],
        shadow: [
          { label: '总是显示', value: 'always' },
          { label: '悬停显示', value: 'hover' },
          { label: '从不显示', value: 'never' }
        ],
        direction: [
          { label: '水平', value: 'horizontal' },
          { label: '垂直', value: 'vertical' }
        ],
        placement: [
          { label: '顶部', value: 'top' },
          { label: '顶部左侧', value: 'top-start' },
          { label: '顶部右侧', value: 'top-end' },
          { label: '底部', value: 'bottom' },
          { label: '底部左侧', value: 'bottom-start' },
          { label: '底部右侧', value: 'bottom-end' },
          { label: '左侧', value: 'left' },
          { label: '左侧顶部', value: 'left-start' },
          { label: '左侧底部', value: 'left-end' },
          { label: '右侧', value: 'right' },
          { label: '右侧顶部', value: 'right-start' },
          { label: '右侧底部', value: 'right-end' }
        ],
        align: [
          { label: '左对齐', value: 'left' },
          { label: '居中', value: 'center' },
          { label: '右对齐', value: 'right' },
          { label: '两端对齐', value: 'justify' }
        ],
        position: [
          { label: '静态', value: 'static' },
          { label: '相对', value: 'relative' },
          { label: '绝对', value: 'absolute' },
          { label: '固定', value: 'fixed' },
          { label: '粘性', value: 'sticky' }
        ],
        variant: [
          { label: '轮廓', value: 'outlined' },
          { label: '填充', value: 'filled' },
          { label: '文本', value: 'text' }
        ],
        effect: [
          { label: '暗色', value: 'dark' },
          { label: '亮色', value: 'light' },
          { label: '朴素', value: 'plain' }
        ]
      }
    };
  },
  computed: {
    // 当前选中组件的属性
    currentComponentProps() {
      if (this.selectedIndex === -1) return {};
      return this.pageComponents[this.selectedIndex].props || {};
    }
  },
  created() {
    // 初始化组件列表
    this.initComponentList();
  },
  methods: {
    // 初始化组件列表
    initComponentList() {
      // 从组件包中获取组件列表
      this.componentList = Object.keys(ComponentPackage).map(key => {
        const component = ComponentPackage[key];
        return {
          name: key,
          component: component,
          label: component.componentName || key,
          icon: component.icon || 'el-icon-menu',
          defaultProps: component.defaultProps || {}
        };
      });
    },

    // 拖拽开始
    dragStart(event, component) {
      event.dataTransfer.setData('componentName', component.name);
    },

    // 放置组件
    dropComponent(event) {
      const componentName = event.dataTransfer.getData('componentName');
      const componentInfo = this.componentList.find(item => item.name === componentName);

      if (componentInfo) {
        // 获取放置位置
        const rect = event.currentTarget.getBoundingClientRect();
        const left = event.clientX - rect.left;
        const top = event.clientY - rect.top;

        // 根据组件类型设置默认尺寸
        let defaultWidth = 150;
        let defaultHeight = 40;

        // 根据组件类型调整默认尺寸
        switch (componentInfo.name) {
          case 'ButtonComponent':
            defaultWidth = 120;
            defaultHeight = 40;
            break;
          case 'TextComponent':
            defaultWidth = 200;
            defaultHeight = 60;
            break;
          case 'ImageComponent':
            defaultWidth = 200;
            defaultHeight = 150;
            break;
          case 'InputComponent':
            defaultWidth = 240;
            defaultHeight = 40;
            break;
          case 'CardComponent':
            defaultWidth = 300;
            defaultHeight = 200;
            break;
          case 'ProgressComponent':
            defaultWidth = 300;
            defaultHeight = 40;
            break;
          case 'TimelineComponent':
            defaultWidth = 300;
            defaultHeight = 300;
            break;
          case 'CarouselComponent':
            defaultWidth = 400;
            defaultHeight = 250;
            break;
          default:
            defaultWidth = 150;
            defaultHeight = 80;
        }

        // 创建新组件实例
        const newComponent = {
          name: componentInfo.name,
          component: componentInfo.component,
          props: JSON.parse(JSON.stringify(componentInfo.defaultProps || {})),
          style: {
            position: 'absolute',
            left: left,
            top: top,
            width: defaultWidth,
            height: defaultHeight,
            zIndex: this.pageComponents.length + 1,
            backgroundColor: '',
            borderWidth: 0,
            borderStyle: 'none',
            borderColor: '',
            borderRadius: 0,
            textAlign: 'left',
            verticalAlign: 'top',
            enableShadow: false,
            shadowX: 0,
            shadowY: 0,
            shadowBlur: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            animation: {
              type: 'none',
              direction: 'left',
              duration: 1,
              delay: 0,
              iterationCount: 1,
              infinite: false,
              hoverTrigger: false
            }
          }
        };

        // 添加到页面组件列表
        this.pageComponents.push(newComponent);

        // 选中新添加的组件
        this.selectedIndex = this.pageComponents.length - 1;

        // 确保组件样式和属性正确应用
        this.$nextTick(() => {
          this.updateComponentStyle();
        });
      }
    },

    // 选择组件
    selectComponent(index) {
      this.selectedIndex = index;
    },

    // 移除组件
    removeComponent(index) {
      this.pageComponents.splice(index, 1);
      if (this.selectedIndex === index || this.pageComponents.length === 0) {
        this.selectedIndex = -1;
      } else if (this.selectedIndex > index) {
        this.selectedIndex--;
      }
    },

    // 导出JSON
    exportJSON() {
      const jsonData = this.pageComponents.map(item => ({
        name: item.name,
        props: item.props
      }));

      this.pageJSON = JSON.stringify(jsonData, null, 2);
      this.jsonDialogVisible = true;
    },

    // 复制JSON
    copyJSON() {
      const textarea = document.createElement('textarea');
      textarea.value = this.pageJSON;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);

      this.$message.success('JSON数据已复制到剪贴板');
      this.jsonDialogVisible = false;
    },



    // 预览页面
    previewPage() {
      if (this.pageComponents.length === 0) {
        this.$message.warning('请先添加组件');
        return;
      }

      this.previewDialogVisible = true;
    },

    // 切换全屏预览
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },

    // 清空设计
    clearDesign() {
      this.$confirm('确定要清空当前设计吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.pageComponents = [];
        this.selectedIndex = -1;
      }).catch(() => {});
    },

    // 取消选择组件
    deselectComponent() {
      this.selectedIndex = -1;
    },

    // 获取组件样式
    getComponentStyle(item) {
      if (!item.style) return {};

      const style = {
        position: item.style.position || 'relative',
        left: item.style.left ? `${item.style.left}px` : 'auto',
        top: item.style.top ? `${item.style.top}px` : 'auto',
        width: item.style.width ? `${item.style.width}px` : 'auto',
        height: item.style.height ? `${item.style.height}px` : 'auto',
        zIndex: item.style.zIndex || 'auto',
        backgroundColor: item.style.backgroundColor || '',
        borderWidth: item.style.borderWidth ? `${item.style.borderWidth}px` : '',
        borderStyle: item.style.borderStyle || '',
        borderColor: item.style.borderColor || '',
        borderRadius: item.style.borderRadius ? `${item.style.borderRadius}px` : '',
        textAlign: item.style.textAlign || '',
      };

      // 添加阴影
      if (item.style.enableShadow) {
        style.boxShadow = `${item.style.shadowX || 0}px ${item.style.shadowY || 0}px ${item.style.shadowBlur || 0}px ${item.style.shadowColor || 'rgba(0,0,0,0.5)'}`;
      }

      // 添加动画样式
      if (item.style.animation && item.style.animation.type !== 'none') {
        const animation = item.style.animation;
        let animationName = animation.type;

        // 对于需要方向的动画，添加方向后缀
        if (['slide', 'fade'].includes(animation.type) && animation.direction) {
          animationName = `${animation.type}-${animation.direction}`;
        }

        // 设置动画属性
        style.animation = `${animationName} ${animation.duration}s`;

        // 添加延迟
        if (animation.delay > 0) {
          style.animation += ` ${animation.delay}s`;
        }

        // 添加重复次数
        if (animation.infinite) {
          style.animation += ' infinite';
        } else if (animation.iterationCount > 1) {
          style.animation += ` ${animation.iterationCount}`;
        }

        // 添加动画填充模式
        style.animation += ' forwards';

        // 如果是悬停触发，则只在悬停时应用动画
        if (animation.hoverTrigger) {
          style.animation = 'none'; // 默认不应用动画
          style.transition = `all ${animation.duration}s`;
          // 注意：悬停效果需要在 CSS 中通过 .component-wrapper:hover 来实现
        }
      }

      return style;
    },

    // 更新组件样式
    updateComponentStyle() {
      if (this.selectedIndex === -1) return;

      // 确保组件属性变更能够正确应用
      const component = this.pageComponents[this.selectedIndex];

      // 处理尺寸属性
      if (component.props.size) {
        // 确保尺寸属性正确应用
        this.$nextTick(() => {
          // 强制组件重新渲染以应用尺寸变更
          this.$forceUpdate();
        });
      }

      // 处理动态属性
      if (component.style.animation && component.style.animation.type !== 'none') {
        // 确保动画属性正确应用
        this.$nextTick(() => {
          // 强制组件重新渲染以应用动画变更
          this.$forceUpdate();
        });
      }

      // 强制更新视图
      this.$forceUpdate();
    },

    // 更新阴影
    updateShadow() {
      if (this.selectedIndex === -1) return;

      const component = this.pageComponents[this.selectedIndex];
      if (!component.style.enableShadow) {
        // 如果禁用阴影，清除阴影属性
        component.style.shadowX = 0;
        component.style.shadowY = 0;
        component.style.shadowBlur = 0;
        component.style.shadowColor = 'rgba(0, 0, 0, 0.5)';
      }

      this.updateComponentStyle();
    },

    // 更新动画
    updateAnimation() {
      if (this.selectedIndex === -1) return;

      const component = this.pageComponents[this.selectedIndex];
      if (!component.style.animation) {
        // 如果没有动画属性，初始化默认值
        component.style.animation = {
          type: 'none',
          direction: 'left',
          duration: 1,
          delay: 0,
          iterationCount: 1,
          infinite: false,
          hoverTrigger: false
        };
      }

      // 如果动画类型为 none，重置其他动画属性
      if (component.style.animation.type === 'none') {
        component.style.animation.direction = 'left';
        component.style.animation.duration = 1;
        component.style.animation.delay = 0;
        component.style.animation.iterationCount = 1;
        component.style.animation.infinite = false;
        component.style.animation.hoverTrigger = false;
      }

      // 如果设置为无限循环，则重复次数无效
      if (component.style.animation.infinite) {
        component.style.animation.iterationCount = 1;
      }

      this.updateComponentStyle();
    },

    // 开始拖拽
    startDrag(event, index) {
      event.stopPropagation();

      if (this.selectedIndex !== index) {
        this.selectComponent(index);
      }

      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;

      const component = this.pageComponents[index];
      this.startLeft = component.style.left || 0;
      this.startTop = component.style.top || 0;

      // 添加全局事件监听
      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },

    // 拖拽中
    onDrag(event) {
      if (!this.isDragging || this.selectedIndex === -1) return;

      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;

      const component = this.pageComponents[this.selectedIndex];
      component.style.left = Math.max(0, this.startLeft + deltaX);
      component.style.top = Math.max(0, this.startTop + deltaY);

      this.updateComponentStyle();
    },

    // 停止拖拽
    stopDrag() {
      this.isDragging = false;

      // 移除全局事件监听
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },

    // 开始调整大小
    startResize(event, index, direction) {
      event.stopPropagation();

      if (this.selectedIndex !== index) {
        this.selectComponent(index);
      }

      this.isResizing = true;
      this.resizeDirection = direction;
      this.startX = event.clientX;
      this.startY = event.clientY;

      const component = this.pageComponents[index];
      this.startWidth = component.style.width || 100;
      this.startHeight = component.style.height || 40;
      this.startLeft = component.style.left || 0;
      this.startTop = component.style.top || 0;

      // 添加全局事件监听
      document.addEventListener('mousemove', this.onResize);
      document.addEventListener('mouseup', this.stopResize);
    },

    // 调整大小中
    onResize(event) {
      if (!this.isResizing || this.selectedIndex === -1) return;

      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;

      const component = this.pageComponents[this.selectedIndex];

      // 根据调整方向处理大小和位置
      switch (this.resizeDirection) {
        case 'se': // 右下
          component.style.width = Math.max(10, this.startWidth + deltaX);
          component.style.height = Math.max(10, this.startHeight + deltaY);
          break;
        case 'sw': // 左下
          component.style.width = Math.max(10, this.startWidth - deltaX);
          component.style.left = Math.max(0, this.startLeft + deltaX);
          component.style.height = Math.max(10, this.startHeight + deltaY);
          break;
        case 'ne': // 右上
          component.style.width = Math.max(10, this.startWidth + deltaX);
          component.style.height = Math.max(10, this.startHeight - deltaY);
          component.style.top = Math.max(0, this.startTop + deltaY);
          break;
        case 'nw': // 左上
          component.style.width = Math.max(10, this.startWidth - deltaX);
          component.style.left = Math.max(0, this.startLeft + deltaX);
          component.style.height = Math.max(10, this.startHeight - deltaY);
          component.style.top = Math.max(0, this.startTop + deltaY);
          break;
      }

      this.updateComponentStyle();
    },

    // 停止调整大小
    stopResize() {
      this.isResizing = false;

      // 移除全局事件监听
      document.removeEventListener('mousemove', this.onResize);
      document.removeEventListener('mouseup', this.stopResize);
    },

    // 判断是否为颜色属性
    isColorProperty(key) {
      return key.toLowerCase().includes('color') || key.toLowerCase().includes('background');
    },

    // 判断是否为布尔属性
    isBooleanProperty(value) {
      return typeof value === 'boolean';
    },

    // 判断是否为数字属性
    isNumberProperty(value) {
      return typeof value === 'number';
    },

    // 判断是否为选择属性
    isSelectProperty(key) {
      return ['type', 'size', 'fit', 'shadow', 'direction', 'placement', 'align', 'position', 'variant', 'effect'].includes(key);
    },

    // 判断是否应该使用下拉选择
    shouldUseSelect(key) {
      // 将更多的属性设置为下拉选择
      const selectKeys = ['type', 'size', 'shadow', 'direction', 'placement', 'align', 'position', 'variant', 'effect'];
      return selectKeys.includes(key);
    },

    // 获取选择属性的选项
    getSelectOptions(key) {
      return this.selectOptions[key] || [];
    }
  }
};
</script>

<style scoped>
/* 动画定义 */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-top {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-bottom {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slide-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-top {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slide-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes scale {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* 悬停动画 */
.component-wrapper:hover.hover-fade { opacity: 0.7; }
.component-wrapper:hover.hover-scale { transform: scale(1.1); }
.component-wrapper:hover.hover-rotate { transform: rotate(10deg); }
.component-wrapper:hover.hover-shake { animation: shake 0.5s; }

.low-code-platform {
  display: flex;
  height: calc(100vh - 100px);
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  padding-bottom: 60px; /* 为操作按钮栏留出空间 */
}

.component-panel {
  width: 250px;
  border-right: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  overflow-y: auto;
  padding: 10px;
}

.component-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.component-item {
  width: 100px;
  height: 80px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: move;
  background-color: #fff;
  transition: all 0.3s;
}

.component-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.component-item i {
  font-size: 24px;
  margin-bottom: 8px;
  color: #606266;
}

.design-panel {
  flex: 1;
  background-color: #fff;
  overflow-y: auto;
  position: relative;
}

.design-area {
  min-height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.empty-tip {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 16px;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
}

.component-wrapper {
  position: absolute;
  border: 1px dashed transparent;
  padding: 5px;
  border-radius: 4px;
  min-width: 50px;
  min-height: 30px;
  box-sizing: border-box;
}

/* 为布局组件添加虚线边框 */
.component-wrapper.BlockLayoutComponent .component-content,
.component-wrapper.ColumnLayoutComponent .component-content,
.component-wrapper.FlowLayoutComponent .component-content {
  border: 2px dashed #a0cfff;
  background-color: rgba(160, 207, 255, 0.1);
}

.component-wrapper.selected {
  border-color: #409eff;
}

.component-content {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-handle {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #409eff;
  border-radius: 0 4px 0 4px;
  padding: 2px 5px;
  cursor: move;
  z-index: 100;
}

.drag-handle i {
  color: #fff;
  font-size: 16px;
}

.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #409eff;
  z-index: 100;
}

.resize-handle-se {
  bottom: -4px;
  right: -4px;
  cursor: se-resize;
}

.resize-handle-sw {
  bottom: -4px;
  left: -4px;
  cursor: sw-resize;
}

.resize-handle-ne {
  top: -4px;
  right: -4px;
  cursor: ne-resize;
}

.resize-handle-nw {
  top: -4px;
  left: -4px;
  cursor: nw-resize;
}

.property-panel {
  width: 300px;
  border-left: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  overflow-y: auto;
  padding: 10px;
  padding-bottom: 70px; /* 确保内容不被操作栏遮挡 */
}

.property-item {
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.component-actions {
  margin-bottom: 15px;
  text-align: center;
}

.property-item label {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-weight: 500;
}

.full-width-control {
  width: 100%;
  margin-top: 4px;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.preview-container {
  min-height: 400px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  background-color: #fff;
}

.preview-component {
  margin-bottom: 10px;
}
</style>
